<template>
  <div class="banner">
    <img :src="this.bannerImg" alt="" class="banner-img" @click="haddleBannerClick">
    <div class="banner-info">
        <div class="banner-title">
            {{this.slightName}}
        </div>
        <div class="banner-num">
            <span class="iconfont">&#xe60c;</span>30
        </div>
    </div>
    <common-gallery :imgs="galleryImgs" v-show="showGallery" @close="haddleBannerClose"></common-gallery>
  </div>
</template>

<script>
import CommonGallery from '@/common/gallery/Gallery'
export default {
  name: 'DetailBanner',
  props:{
    slightName:String,
    bannerImg:String,
    galleryImgs:Array,
  },
  data(){
    return{
          imgs:[
            'static/img/detail-banner1.jpg',
            'static/img/detail-banner2.jpg',
            'static/img/detail-banner3.jpg',
          ],
          showGallery:false
    }
  },
  components:{
    CommonGallery,
  },
  methods:{
    haddleBannerClick(){
      this.showGallery = true
    },
    haddleBannerClose(){
      this.showGallery = false
    }
  }
}
</script>

<style lang="stylus" scoped>
.banner 
    position relative
    overflow hidden
    height 0
    padding-bottom 50%
    .banner-img 
        width 100% 
    .banner-info
        display flex
        position absolute
        left    0
        right   0
        bottom  0
        color #ffffff
        line-height .6rem
        .banner-title
            flex 1
            font-size .32rem
            padding 0 .2rem
        .banner-num
            width .6rem
            height .32rem
            line-height .32rem
            margin-top .14rem
            font-size .24rem
            background #000000
            border-radius .3rem
            padding 0 .4rem
        .banner-num span 
            vertical-align middle
            padding-right .1rem
</style>